<!DOCTYPE html>
<html>
<head>
    <title>试题信息表</title>
    <#include "/header.html" />
    <link href="${request.contextPath}/statics/css/swiper.min.css" rel="stylesheet" type="text/css" />
    <link href="${request.contextPath}/statics/css/style_min.css" rel="stylesheet" type="text/css" />
    <style>

        .btn {
            background:#fff;
            border:1px solid #0a8cfd;
            color:#0a8cfd;
            height:28px;
            width:auto;
            padding:0px 15px;
            line-height:28px;
        }

        .btn1 {
            border:1px solid #0a8cfd;
            background:#0a8cfd;
            color:#fff;
        }

        .btn2 {
            background:#0a8cfd;
            color:#fff;
            padding:10px 45px;
            height:45px;
        }

        .btn.active {
            border:1px solid #0a8cfd;
            background:#fff;
            color:#0a8cfd;
        }


        body {
            background:#eff3f7;

        }

        .toolbar {
            width: 95%;
            display:inline-block;
            background:#fff;
            height:70px;
            margin:20px 2.5%;
            border-radius: 8px;
            padding-top:25px;
        }

        .list {
            width: 95%;
            display:inline-block;
            background:#fff;
            height:calc(100% - 140px);
            margin:20px 2.5%;
            border-radius: 8px;
            margin-top:0px;
            padding:0px;
        }

        #jqGrid {
            border:0px;
            display:inline-block;
            width:95% !important;
            margin:10px 2.5% !important;
            height:calc(100% - 20px) !important;
        }


        .ui-th-column.ui-th-ltr {
            font-weight: 400;
            font-size:12px;
        }


        .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
            border:0px !important;
            overflow: hidden  !important;
            text-overflow:ellipsis  !important;
            white-space: nowrap !important;
            /*height:30px !important;*/
        }

        .jqgrid-rownum.active{
            background:transparent !important;
        }

        .leftList {
            float:left;
            width:23%;
            height:100%;
            margin-right:2%;

        }

        .rightList {
            float:right;
            width:75%;
            height:100%;

        }

        .sjlistItem {
            overflow-x: hidden;
            height:350px;
            overflow-y: auto;
        }

        .sjlistItem ul {
            list-style: none;
            margin:0px;
            padding:0px;
            padding-left:5px;
            border:0px solid #ccc;
            border-radius: 10px;
            position: relative;
            left:10px;
            top:10px;
            height:90%;
        }

        .sjlistItem ul li {
            line-height:30px;
            width:100%;
            cursor:pointer;
        }

        .sjlistItem ul li:hover {
            background: #f6f6f6;
            color:#666;
        }

        .leftList .title {
            background:#0a8cfd;
            color:#fff;
            padding:3px;
        }
    </style>
</head>
<body>
<div id="rrapp" >
   <div class="toolbar" >
        <span style="margin-left:30px;">
            科目：<span  style="margin-left:30px;" ><select class="" v-model="kcId">
                                        <option value="">请选择...</option>
                                        <option v-for="(it,index) in jyKcxxList"  v-bind:value="it.id" >{{it.mc}}</option>
                                    </select> </span>
        </span>
        <span  style="margin-left:30px;">
            考试时间：
             <span  style="margin-left:30px;" ><span class="calendarWarp"  style="width:130px;">
                                             <input type="text"  style="width:130px;" name="date" class='ECalendar' id="ECalendar_date_begin"  value="2018-10-01 15:32"/>
                                            </span>
                                    </span> <span style="padding:0px 15px;"> 到</span>
                                    <span ><span class="calendarWarp" style="width:130px;">
                                             <input type="text"  style="width:130px;" name="date" class='ECalendar' id="ECalendar_date_end"  value="2019-03-01 15:32"/>
                                            </span>
                                    </span>
        </span>
       <span style="float:right;margin-right:30px;">
           <button class="btn" v-on:click="getSjList()" >查询</button>
       </span>

   </div>
  <div class="list" >
      <div class="leftList" >
        <div class="title" >试卷列表</div>
        <div class="sjlistItem">
            <ul>
                <li v-for="it in sjlist" class="sjItem" v-on:click="itemClick(it)">
                    <span :idv="it.id">{{it.name}}</span>
                </li>
            </ul>
        </div>
      </div>
      <div class="rightList">
          <table id="jqGrid"></table>
          <div id="jqGridPager"></div>
      </div>
  </div>
</div>
<script >

    $(function(){
        $("#ECalendar_date_begin").ECalendar({
            type:"time",   //模式，time: 带时间选择; date: 不带时间选择;
            stamp : false,   //是否转成时间戳，默认true;
            offset:[0,2],   //弹框手动偏移量;
            format:"yyyy-mm-dd hh:ii",   //时间格式 默认 yyyy-mm-dd hh:ii;
            skin:"#0a8cfd",   //皮肤颜色，默认随机，可选值：0-8,或者直接标注颜色值;
            step:10,   //选择时间分钟的精确度;
            callback:function(v,e){

            } //回调函数
        });
        $("#ECalendar_date_end").ECalendar({
            type:"time",   //模式，time: 带时间选择; date: 不带时间选择;
            stamp : false,   //是否转成时间戳，默认true;
            offset:[0,2],   //弹框手动偏移量;
            format:"yyyy-mm-dd hh:ii",   //时间格式 默认 yyyy-mm-dd hh:ii;
            skin:"#0a8cfd",   //皮肤颜色，默认随机，可选值：0-8,或者直接标注颜色值;
            step:10,   //选择时间分钟的精确度;
            callback:function(v,e){

            } //回调函数
        });
    })

</script>
<script src="${request.contextPath}/statics/libs/Ecalendar.jquery.min.js"></script>
<script src="${request.contextPath}/statics/js/modules/jy/jysjkslist.js?_${.now?long}"></script>
</body>
</html>